<template>
  <div class="right-chart-1">
    <div class="title cursorPointer">工艺参数</div>
    <div class="wrap">
      <template v-if="!noData">
        <span class="line"></span>
        <div v-for="(item, index) in list" :key="index" class="item">
          <span class="item-title">{{ item.keyProcessName }}</span>
          <div class="item-props">
            <template v-if="item.indexValues">
              <div
                v-for="(prop, i) in item.indexValues"
                :key="prop.parameterName"
              >
                <span>{{ prop.parameterShortName }}: </span>
                <span
                  :class="{
                    abnormal: prop.abnormal == 'Y',
                    unabnormal: prop.abnormal == 'N',
                  }"
                >
                  {{ prop.showPrameterValue }}
                  <i
                    v-if="
                      prop.ruleDto &&
                      prop.ruleDto.abnormalMax &&
                      prop.parameterValue > Number(prop.ruleDto.abnormalMax)
                    "
                    class="el-icon-top"
                  ></i>
                  <i
                    v-if="
                      prop.ruleDto &&
                      prop.ruleDto.abnormalMin &&
                      prop.parameterValue < Number(prop.ruleDto.abnormalMin)
                    "
                    class="el-icon-bottom"
                  ></i>
                </span>
              </div>
            </template>
            <template v-if="item.scadaValues">
              <div
                v-for="(prop, i) in item.scadaValues"
                :key="prop.parameterName"
              >
                <span>{{ prop.parameterShortName }}: </span>
                <span
                  :class="{
                    abnormal: prop.abnormal == 'Y',
                    unabnormal: prop.abnormal == 'N',
                  }"
                >
                  {{ prop.showPrameterValue }}
                  <i
                    v-if="
                      prop.ruleDto &&
                      prop.ruleDto.abnormalMax &&
                      prop.parameterValue > Number(prop.ruleDto.abnormalMax)
                    "
                    class="el-icon-top"
                  ></i>
                  <i
                    v-if="
                      prop.ruleDto &&
                      prop.ruleDto.abnormalMin &&
                      prop.parameterValue < Number(prop.ruleDto.abnormalMin)
                    "
                    class="el-icon-bottom"
                  ></i>
                </span>
              </div>
            </template>
          </div>
        </div>
      </template>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { getKeyProcessParameterByOrderId } from "@/api/dashboard/blowIrriagtionSpinLineDaily";

export default {
  name: "RightChart1",
  components: { CustomChart },
  props: {
    orderItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    noData() {
      return !this.orderItem || !this.list?.length;
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取统计数据
    async getData() {
      if (!this.orderItem) {
        return;
      }

      try {
        const params = {
          orderId: this.orderItem.id,
        };
        const res = await getKeyProcessParameterByOrderId(params);

        this.list = res.data || [];
      } catch (error) {
        this.list = [];

        console.error(error);
      }
    },
  },
  watch: {
    orderItem: {
      handler() {
        this.getData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 28px;
    font-size: 15px;
    position: relative;

    .line {
      position: absolute;
      width: 72%;
      height: 2px;
      left: 14%;
      top: 30px;
      background-color: #fac858;
    }

    .item-title {
      display: inline-block;
      width: 50px;
      height: 28px;
      line-height: 28px;
      margin-left: 50%;
      margin-bottom: 8px;
      transform: translateX(-50%);
      border-radius: 4px;
      text-align: center;
      background: #1d59df;
      color: #ffffff;
    }

    .item-props {
      line-height: 25px;
      font-size: 14px;
      .abnormal {
        color: #ff5050;
      }
      .unabnormal {
        color: #74d047;
      }
    }
  }
}
</style>
